<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <p><input type="checkbox" name="" id="sed">111111</p>
        <p><input type="checkbox" name="" id="sed">222222</p>
        <p><input type="checkbox" name="" id="sed">333333</p>
        <p><input type="checkbox" name="" id="sed" checked>444444</p>
        <p><input type="checkbox" name="" id="sed" checked>555555</p>
    </form>
    <!-- <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button> -->
    <button onclick="getAll(0)">全选</button>
    <button onclick="getAll(1)">全不选</button>
    <button onclick="getAll(2)">反选</button>
    <script>
        let sec = document.querySelectorAll('#sed')

    // 笨方法
        // const btn1 = document.querySelector('#btn1')
        // btn1.addEventListener('click',function(){
        //     for(let i = 0;i< sec.length;i++){
        //         sec[i].checked = true
        //     }
        //     console.log(sec);
        // })
        // btn2.addEventListener('click',function(){
        //     for(let i = 0;i< sec.length;i++){
        //         sec[i].checked = false
        //     }
        // })
        // btn3.addEventListener('click',function(){
        //     for(let i = 0;i< sec.length;i++){
        //         sec[i].checked = !sec[i].checked
        //     }
        // })

    // 改进后的方法
        function getAll(num) {
            for (let i = 0; i < sec.length; i++) {
                if (num == 0) {
                    sec[i].checked = true
                } else if (num == 1) {
                    sec[i].checked = false
                } else {
                    sec[i].checked = !sec[i].checked
                }
            }
        }
    </script>
</body>

</html>